<template>
  <div class="editor">
    <mavon-editor
      v-model="articleFrom.content"
      :toolbarsBackground="toolbarsBackground"
      :previewBackground="previewBackground"
      :navigation="navigation"
      :placeholder="placeholder"
      :fullscreen="true"
      class="mavon-editor"
      @save="save()"
    ></mavon-editor>

    <el-dialog
      title="文章属性"
      :visible.sync="articleDialog"
      :append-to-body="appendToBody"
    >
      <el-form :model="articleFrom">
        <el-form-item label="标题">
          <el-input v-model="articleFrom.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="articleFrom.description"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="articleFrom.author" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="articleDialog = false">取 消</el-button>
        <el-button type="primary" @click="commit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ArticleListAdd",
  components: {},
  props: ["rowData", "optionType"],
  data() {
    return {
      formLabelWidth: "100px",
      appendToBody: true,
      articleFrom: {
        id: -1,
        title: "",
        content: "",
        description: "",
        author: "",
        categoryId: "",
        commentNum: -1,
        contentFormat: "",
        cover: "",
        coverType: -1,
        createTime: "",
        likeNum: -1,
        updateTime: "",
        publish: -1,
        readNum: -1,
        recommend: -1,
        top: -1,
      },
      articleDialog: false,
      toolbarsBackground: "rgba(0,0,0,0.2)",
      previewBackground: "#fbfbfb",
      navigation: false,
      placeholder: "开始写文章...",
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log("add===rowData:", this.rowData);
    console.log("add===optionType:", this.optionType);
    this.articleFrom.title = this.rowData.title;
    this.articleFrom.content = this.rowData.content;
    this.articleFrom.description = this.rowData.description;
    this.articleFrom.author = this.rowData.author;
    this.articleFrom.id = this.rowData.id;
    this.articleFrom.categoryId = this.rowData.categoryId;
    this.articleFrom.commentNum = this.rowData.commentNum;
    this.articleFrom.contentFormat = this.rowData.contentFormat;
    this.articleFrom.cover = this.rowData.cover;
    this.articleFrom.createTime = this.rowData.createTime;
    this.articleFrom.coverType = this.rowData.coverType;
    this.articleFrom.likeNum = this.rowData.likeNum;
    this.articleFrom.updateTime = this.rowData.updateTime;
    this.articleFrom.publish = this.rowData.publish;
    this.articleFrom.readNum = this.rowData.readNum;
    this.articleFrom.recommend = this.rowData.recommend;
    this.articleFrom.top = this.rowData.top;
    console.log("this.articleFrom:", this.articleFrom);
  },
  mounted() {
    //全屏
    // let el = document.querySelector(".editor");
    // if (el.requestFullscreen) {
    //   el.requestFullscreen();
    // } else if (el.webkitRequestFullScreen) {
    //   el.webkitRequestFullScreen();
    // } else if (el.mozRequestFullScreen) {
    //   el.mozRequestFullScreen();
    // } else {
    //   el.msRequestFullscreen();
    // }
    // console.log(el);
  },
  methods: {
    commit() {
      if (this.optionType == "edit") {
        this.$http({
          url: "/core/sys/article/update",
          method: "post",
          data: {
            title: this.articleFrom.title,
            content: this.articleFrom.content,
            description: this.articleFrom.description,
            author: this.articleFrom.author,
            id: this.articleFrom.id,
            categoryId: this.articleFrom.categoryId,
            commentNum: this.articleFrom.commentNum,
            contentFormat: this.articleFrom.contentFormat,
            cover: this.articleFrom.cover,
            createTime: this.articleFrom.createTime,
            coverType: this.articleFrom.coverType,
            likeNum: this.articleFrom.likeNum,
            updateTime: this.articleFrom.updateTime,
            publish: this.articleFrom.publish,
            readNum: this.articleFrom.readNum,
            recommend: this.articleFrom.recommend,
            top: this.articleFrom.top,
          },
        }).then((result) => {
          console.log(result);
          this.articleDialog = false;
          this.$bus.$emit("articleAddSuccess", true);
          console.log(JSON.stringify(result.data));
        });
      } else if (this.optionType == "add") {
        this.$http({
          url: "/core/sys/article/save",
          method: "post",
          data: {
            title: this.articleFrom.title,
            author: this.articleFrom.author,
            content: this.articleFrom.content,
            description: this.articleFrom.description,
          },
        }).then((result) => {
          console.log(result);
          this.articleDialog = false;
          this.$bus.$emit("articleAddSuccess", true);
          console.log(JSON.stringify(result.data));
        });
      } else {
        alert("optionType错误，应为“edit”或“add”");
      }
    },
    save() {
      console.log("save this.rowData:", this.rowData);
      this.articleDialog = true;
    },
  },
};
</script>

<style scoped lang="scss">
.article-title {
  font-size: 20px;
  width: 80%;
  line-height: 40px;
}
.mavon-editor {
  width: 100%;
  height: 100%;
}
</style>
